<template>
	<view class="wallet   hv100  clearfix ">
		<cu-custom bgColor="bg-white" isBack >
			<block slot="content">订单详情</block>
		</cu-custom>
		<view class="orderxq-boxs flex justify-center align-center">
			<image :src="'/static/order/list'+status+'.png'" class="block19 mr5"></image>
			<text class="ml5 text-white f16">{{orderxq[status]}}</text>
		</view>
		<!--
		<view class="px15 bg-white  py20 flex align-center" v-if="status==3">
			<image src="/static/user/songhuo.png" class="block35" ></image>
			<view class="flex wsaddress flex-direction align-start">
				<text class="ellipsis2 f16 ">{{address.address}}</text>
				<text class="text-info f12 mt15">{{ordertime}}</text>
			</view>
		</view>
		-->
		<view class="px15 bg-white mt1 py20 flex align-center" v-if="orderWay!=2">
			<image src="/static/order/address.png" class="block35" ></image>
			<view class="flex wsaddress flex-direction align-start">
				<view class="flex  py5 align-center wp100 justify-between">
					<text class="f14">{{address.name}}</text>
					<text class="f14">{{address.tel}}</text>
				</view>
				<text class="ellipsis2 f16 py5">{{address.street}}</text>
			</view>
		</view>
		<view class="mt10  bg-white flex flex-direction ">
			<view  class="flex flex-direction  mt5">
				<view class="flex align-center justify-start mt10 " v-for="(item,index) in goodsInfo" :key="index">
					<view class="flex flex-direction wp100 ">
						<view class="flex align-center justify-between bb1 px15 pb10">
							<view class="block70 border-info radius-5 discenter"><image :src="item.pic" class="block70"></image></view>
							<view class="flex flex-direction align-start justify-between ml15 h70 mworde">
								<view class="flex flex-direction pr10 wp100">
									<text class="ellipsis ">{{item.name}}</text>
									<text class="ellipsis wp100 mt5 f12 text-info">{{item.guige}}</text>
								</view>
								<view class="flex align-center  justify-between wp100">
									<text class="text-prices">￥{{item.money}}</text>
									<text class="text-black">X {{item.num}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex flex-direction bg-white mt10 px15 f14 ">
			<view class="flex align-center mt15">
				<text class="text-info">订单编号:</text>
				<view class="flex align-center liuyan-box ml20">
					<text class="text-black">{{order.orderSn}}</text>
				</view>
			</view>
			<view class="flex align-center mt15">
				<text class="text-info">下单时间:</text>
				<view class="flex align-center liuyan-box ml20">
					<text class="text-black">{{order.ordertime}}</text>
				</view>
			</view>
			<view class="flex align-center mt15">
				<text class="text-info">支付方式:</text>
				<view class="flex align-center liuyan-box ml20">
					<text class="text-black">{{order.paytype}}</text>
				</view>
			</view>
			<view class="flex align-center mt15">
				<text class="text-info">配送方式:</text>
				<view class="flex align-center liuyan-box ml20">
					<text class="text-black">{{order.peisong}}</text>
				</view>
			</view>
			<view class="flex align-start mt15 mb15">
				<text class="text-info">买家留言:</text>
				<view class="flex align-center liuyan-box ml20">
					<text class="text-black">{{order.liuyan}}</text>
				</view>
			</view>
		</view>
		<view class="flex flex-direction bg-white order-xq-boxs">
			<view class="flex align-center justify-between px15 mt15">
				<text class="text-info">商品总额</text>
				<text class="text-black">￥{{countMoney}}</text>
			</view>
			<view class="flex align-center justify-between px15 mt15 " :class="{mb20:order.status!=2}">
				<text class="text-info">配送费</text>
				<text class="text-black">￥{{order.peisongfee}}</text>
			</view>
			<view class="flex align-center justify-end mt30 mb20 px15" v-if="order.status==2">
				<text class="mr5">总计:</text>
				<text class="f16 text-prices">￥{{countMoney}}</text>
			</view>
		</view>
		<view class="confirm-box flex align-center  justify-between" v-if="order.status!=2">
			<view class="flex align-center pl15">
				<text class="text-black ">总计:</text>
				<text class="text-prices ml10 f16">￥{{countMoney}}</text>
			</view>
			<view class="flex align-center justify-end">
				<view class="order-quxiao discenter text-white mr15" v-if="status==2" @click="quxiao">取消</view>
				<view class="order-del discenter text-white mr15" v-if="status==2" @click="topay">备货完成</view>
			</view>
			<view class="order-del discenter text-white mr15" v-if="status==4||status==5" @click="delorder">删除</view>
		</view>
		<view @touchmove.stop.prevent class="cu-modal" :class="modalName == 'onlineModal' ? 'show' : ''">
			<view class="cu-dialog bg-white" @tap.stop>
				<view class="py20 discenter f16 fwb">取消订单</view>
				<view class="mb40">您确定要取消该订单吗？</view>
				<view class="action h50 mx0 flex-sub f12  bt1  flex align-center justify-between px30 ">
					<view class="w-50 discenter br1">
						<text @click="HideModal" class="px20 py10 radius-5 f15 color-black">取消</text>
					</view>
					<view class="w-50 discenter">
						<text @click="quxiaosure" class="px20 py10 radius-5 f15 color-black">确定</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
	data() {
		return {
			id:'',
			status:'',
			storeName:'',
			storeid:'',
			orderxq:['全部订单','等待付款','待备货','待收货','已完成','取消订单'],
			//收货地址
			address:{name:'',tel:'',address:''},
			order:{peisong:'',liuyan:'',paytype:'',storename:'',ordertime:'',orderSn:'',peisongfee:''},
			//单件商品
			goodsInfo:[
				{
					pic:'',
					name:'',
					money:'',
					num:0,
					cname:'',
					shopname:''
				},
			],
			countMoney:0,//合计金额
			dibuorders:false,	//点击确认按钮时隐藏，防止重复点击
			//选择配送类型和支付类型
			choicebox:false,
			boxtype:0,//展示类型
			peisong:0,//配送费
			payType:0,
			orderWay:2
		}
	},
	onLoad(e) {
		this.id=e.id
		this.getData()
	},
	onHide() {
		this.HideModal()
	},
	onBackPress() {
		this.HideModal()
	},
	methods: {
		...mapActions([ 'setUpdate']),
		async getData() {
			let { data:{status,orderSn,addTime,payMent,sendType,payType,desc,sendMoney,countMoney,addr,store,orderWay} } = await this.$http.post('store.storeddxq',{orderId:this.id})
			this.status=status
			this.orderWay=orderWay
			this.address=addr
			this.storeName=store.storeName
			this.storeid=store.id 
			this.goodsInfo=store.data
			this.order.peisong=sendType
			this.order.peisongfee=sendMoney
			this.order.liuyan=desc
			this.order.orderSn=orderSn
			this.order.ordertime=addTime
			this.order.paytype=payMent
			this.countMoney=countMoney
			this.payType=payType-1

		},
		//取消
		quxiao(){
			this.ShowModal('onlineModal')
		},
		async delorder() {
			await this.$http.post('store.mydel', { orderId: this.id }, { tipConfig: {storeLoading: true, isSuccessTip: true, isSuccessBack: true, navigateBack: 1  } })
			this.setUpdate(true)
		},
		async quxiaosure() {
			await this.$http.post('store.myquxiao', { orderId: this.id }, { tipConfig: {storeLoading: true, isSuccessTip: true, isSuccessBack: true, navigateBack: 1  } })
			this.HideModal()
			this.setUpdate(true)
		},
		async topay(){
			let { data } = await this.$http.post('store.mysure', {orderId:this.id}, {
				tipConfig: { storeLoading: true,isSuccessTip: true, isSuccessBack: true, navigateBack: 1   }
			})
			this.setUpdate(true)
		},
	}
}
</script>

<style>
.wsaddress{
	width: calc(100% - 148rpx);
	margin-left: 30rpx;
}
.mworde{
	width: calc(100% - 170rpx);
}
.dibuorder{
	position: fixed;
	z-index: 199;
	bottom: 0;
}
.block10{
	width: 20rpx;
	height: 20rpx;
}
.choice-line{
	width: 100%;
	height: 1rpx;
	background-color: #edeeef;
}
.py24{
	padding-top: 48rpx;
	padding-bottom: 48rpx;
}
.confirm-box{
	width: 100%;
	height: 110rpx;
	background-color: #FFFFFF;
	position: fixed;
	bottom: 0;
}
.confirm-box-button{
	width: 285rpx;
	height: 110rpx;
	background-color: #FE4725;
}
.confirm-fenge{
	height: 130rpx;
	background-color: #F7F7F7;
}
.orderxq-boxs{
	background-image: linear-gradient(to right, #FF8463, #FE4725) !important;
	height: 160rpx;
}
.liuyan-box{
	width: calc(100% - 200rpx);
}
.order-xq-boxs{
	margin-bottom: 130rpx;
}
.order-del{
	border: 0.5px solid #FE4725;
	border-radius: 5rpx;
	width: 160rpx;
	height: 60rpx;
	color: #FE4725;
} 
.order-quxiao{
	border: 0.5px solid #CCCCCC;
	border-radius: 5rpx;
	color: #000000;
	width: 160rpx;
	height: 60rpx;	
}
.block19{
	width: 38rpx;
	height: 38rpx;
}
</style>
